<template>
  <div class="split-pane-wraper" ref="outer">
    <div class="pane pane-left" :style="{ width:leftWidth }"></div>
    <div @mousedown="handleMousedown" class="pane-trigger-con" :style="{ left: triggerLeft,width: `${triggerWidth}px` }"></div>
    <div class="pane pane-right" :style="{ left:leftWidth }"></div>
  </div>
</template>
<script>
export default {
  name: 'splitDom',
  props:{
    triggerWidth: {
      type: Number,
      default: 8
    }
  },
  data(){
    return {
      leftW : 0.3,
      canMove : false
    }
  },
  methods:{
    handleMousemove(event){
      if(!this.canMove) return
      const outerRect = this.$refs.outer.getBoundingClientRect()
      const offset = event.pageX - outerRect.left
      let  offsetPercent = offset / outerRect.width
      if(offsetPercent < 0.1) offsetPercent = 0.1
      if(offsetPercent >0.9) offsetPercent = 0.9
      this.leftW = offsetPercent
    },
    handleMouseup(){
      this.canMove = false
    },
    handleMousedown(){
      document.addEventListener('mousemove',this.handleMousemove)
      document.addEventListener('mouseup',this.handleMouseup)
      this.canMove = true
    }
  },
  computed: {
    leftWidth (){
      return `${this.leftW*100}%`
    },
    triggerLeft (){
      return `calc(${this.leftW*100}% - ${this.triggerWidth/2}px)`
    }
  }
}
</script>
<style lang="less" scoped>
  .split-pane-wraper{
    height: 100%;
    width:100%;
    position:relative;
    .pane{
      position: absolute;
      top:0;
      height: 100%;
      &-left{
        background:red;
      }
      &-right{
        right: 0;
        bottom: 0;
        background:green;
      }
      &-trigger-con{
        top:0;
        bottom:0;
        background: blue;
        position:absolute;
        z-index: 10;
        user-select: none; // 禁止选中
        cursor: col-resize;
      }
    }
  }
</style>


